<template>
  <div class="container">
    <h1>翻转字符</h1><hr>
    <h2>{{ str }}</h2>
    <button @click="one">翻转按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: '我是大聪明',
    };
  },
  methods: {
    one() {
      this.str = this.str.split('').reverse().join('');
    },
  },
};
</script>


<style>
h2{
  color: orange;
}
p {
  width: 50px;
  height: 50px;
  color: #a6a1d9;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
  border: 5px solid pink;
  border-radius: 50%;
}
h1 {
  color: #fe7299;
}
img {
  width: 150px;
  height: 150px;
}
input {
  color: #a6a1d9;
}
</style>

